<!--
 * @FileDescription: 要素保存二次确认弹窗
 * @Author: 祝小文
 * @Date: 2022-10-10 11:19
-->
<script setup lang="ts">
import { useChemicalStore } from "@/store";
import { removeMapFactor } from "@/utils/common/index";
import { insertOrUpdate } from "@/service/api";
import { ElMessage } from "element-plus";
const chemicalStore = useChemicalStore();

/** 取消 */
const cancel = () => {
  //删除未保存的要素
  removeMapFactor(
    chemicalStore.currentFactorInfo.id,
    chemicalStore.currentFactorInfo.type
  );
  closeDialog();
};

/** 保存 */
const confirm = () => {
  const currentFactorInfo = chemicalStore.currentFactorInfo;
  let bzlx; //获取对应字典代码
  chemicalStore.bzlxList.forEach((item: any) => {
    if (item.zdmc === currentFactorInfo.name) {
      bzlx = item.zddm;
    }
  });

  //位置信息
  let wzxx = currentFactorInfo.wzxx;
  if (currentFactorInfo.wzxx instanceof Array) {
    wzxx = currentFactorInfo.wzxx.map((item) => {
      return { lng: item[0], lat: item[1], alt: item[2] };
    });
  }
  wzxx = JSON.stringify(wzxx);

  //中心点经度纬度
  let zxdjdwd;
  zxdjdwd = {
    zxjd: currentFactorInfo.zxdjdwd.lng,
    zxwd: currentFactorInfo.zxdjdwd.lat,
    zxgd: currentFactorInfo.zxdjdwd.alt,
  };

  const params = {
    bzlx,
    bzmc: currentFactorInfo.attribute.mc,
    qyid: chemicalStore.qyInfo.id,
    cjid: currentFactorInfo.id,
    sfyx: 1,
    wzxx,
    ...zxdjdwd,
  };
  insertOrUpdate(params)
    .then((res: any) => {
      chemicalStore.currentFactorInfo.attribute.sfbh = 1; //标绘状态置为已标绘
      ElMessage.success("地图要素保存成功");
    })
    .catch(() => {
      ElMessage.error("地图要素保存失败");
    });

  closeDialog();
};

/** 关闭提示标牌和当前弹窗 */
const closeDialog = () => {
  chemicalStore.tipsPageShow = false;
  chemicalStore.FactorConfirmShow = false;
};

onMounted(() => {
  // 弹窗禁止右击
  document
    .querySelector(".factor-confirm-dialog")
    .setAttribute("oncontextmenu", "return false");
});
</script>

<template>
  <div class="factor-confirm-dialog">
    <el-dialog
      v-model="chemicalStore.FactorConfirmShow"
      title="提示"
      width="360px"
      hight="245px"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="factor-confirm-dialog-content">
        <i></i>
        <span>是否保存标注</span>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取&nbsp;&nbsp;消</el-button>
          <el-button @click="confirm">保&nbsp;&nbsp;存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
.factor-confirm-dialog {
  /deep/.el-overlay-dialog {
    top: 200px;
  }

  /deep/.el-dialog {
    background: rgba(1, 7, 17, 0.8);

    .el-dialog__title {
      font-size: 20px;
      font-weight: 700;
      color: #fffefe;
    }

    .factor-confirm-dialog-content {
      text-align: center;
      font-size: 16px;
      font-weight: 700;
      color: #fffefe;

      i {
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-right: 8px;
        background-image: url(@/assets/image/common/ts-icon.svg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        vertical-align: sub;
      }
    }

    .el-dialog__footer {
      margin-top: 10px;
      text-align: center;

      .el-button {
        width: 100px;
        height: 30px;
        border: 0;
        color: #ffffff;
        border-radius: 10px;
      }

      .el-button:nth-child(1) {
        background: #778082;
        margin-right: 20px;
      }

      .el-button:nth-child(2) {
        background: #02979b;
      }
    }
  }
}

/deep/.el-dialog__body {
  padding: 10px 20px;
}
</style>
